<template>
  <div class="box">
    <Consider @change="change"  :title="considerData.title" :text="considerData.text" ></Consider>
    <Navbar v-if="navbar===true"></Navbar>
    <MenuMini :mini='menuMini' v-if="menus===true" ></MenuMini>
    <HeaderView v-if="isHeaher===true"></HeaderView>
      <router-view :key="key"></router-view>
      <Top v-if="showTop" @click="backTop"></Top>
      <Tabbar v-if="tabbar===true"></Tabbar>

  </div>
</template>
<script>
import http from '@/util/http'
import Consider from '@/components/utilView/considerView.vue'
import HeaderView from '@/components/headerView.vue'
import Tabbar from '@/components/tabbarView.vue'
import Navbar from '@/components/navbarMini.vue'
import MenuMini from '@/components/menuMini.vue'
import Top from '@/components/utilView/topView.vue'
import scroll from '@/util/scroll'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      clientHeight: null, // 当前页面的可视高度，
      scrollTop: null, // 滚动条的距离
      showTop: false

    }
  },
  mounted () {
    window.addEventListener('scroll', this.winScroll, true) // 监听页面滚动

    // 接受webssoket的消息提醒
    this.$socket.getSock(this.getConfigResult)
    // 获取文章评论未读消息
    this.getComNum()
    // 获取文章点赞未读消息
    this.getFabNum()
  },

  components: {
    HeaderView,
    Top,
    Tabbar,
    Navbar,
    MenuMini,
    Consider
  },
  computed: {
    ...mapState([
      'user',
      'isHeaher',
      'tabbar',
      'menuMini',
      'navbar',
      'menus',
      'ismiddle',
      'allUnread',
      'articleFabNum',
      'articleComNum',
      'delArtcleState',
      'followOneState',
      'removeFansState',
      'delVideoHistory',
      'considerData'
    ]),
    key () {
      return this.$route.query.videoId ? this.$route.query.videoId + new Date() : new Date()
    }
  },
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
        console.log(val, '路由变化')
        console.log(val.matched[0].path)
        try {
          // 在首页时变黑白,哀悼
          if (val.matched[0].path == '/home') {
            document.documentElement.style.webkitFilter = 'grayscale(100%)'
            document.documentElement.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(graysale=1)'
            console.log('当前路由在首页', document.documentElement)
          } else {
            document.documentElement.style.webkitFilter = ''
            document.documentElement.style.filter = ''
            console.log('当前路由不在首页', document.documentElement)
          }

          if (val.fullPath == '/news/comment') { // 切换到评论页面
            // 进入评论页面
            // 1.获取未读评论信息数量
            http.getFabUnread(this.user.uid).then(res => {
              this.updateAllUnread({ type: 'reduce', data: res.data.unread_count_com })
              this.updateComNum({ type: 'zreo' })
              // 2.获取完条数之后，将未读设置为已读
              http.updateComList(this.user.uid).then(res => {
                console.log(res.data)
              })
            })
          } else if (val.fullPath == '/news/fabulous') { // 切换到点赞页面
            // 进入点赞页面
            // 1.获取点赞的未读消息数量
            http.getcommentUnread(this.user.uid).then(res => {
              this.updateAllUnread({ type: 'reduce', data: res.data.unread_count_fab })

              // 2.获取完未读点赞之后，将未读消息设置为已读
              http.updateFabList(this.user.uid).then(res => {
                console.log(res.data)
                this.updateFabNum({ type: 'zreo' })
              })
            })
          }
          // -----------------------------------------
          // 动态设置页面标题
          document.title = val.meta.title
        } catch (error) {

        }
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    ...mapMutations([
      'updateAllUnread',
      'updateComNum',
      'updateFabNum',
      'checkDelArtcle',
      'checkFollowOne',
      'removeFansTwo',
      'delVideo',
      'UserData'
    ]),
    // 获取文章评论未读消息
    getComNum () {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        return
      }
      http.getFabUnread(this.user.uid).then(res => {
        this.updateComNum({ type: 'add', data: res.data.unread_count_com })
        this.updateAllUnread({ type: 'add', data: res.data.unread_count_com })
        // console.log('评论的未读数量', res.data.unread_count_com)
      })
    },
    // 获取文章点赞未读消息
    getFabNum () {
      // 校验登录

      const checkState = this.$checkU()
      if (!checkState) {
        return
      }
      http.getcommentUnread(this.user.uid).then(res => {
        this.updateFabNum({ type: 'add', data: res.data.unread_count_fab })
        this.updateAllUnread({ type: 'add', data: res.data.unread_count_fab })
        // console.log('点赞的未读数量', res.data.unread_count_fab)
      })
    },
    // websoket的消息提醒的回调函数
    getConfigResult (message) {
      try {
        console.log(message, '监听到的内容')
        const { SingleFab, SingleCom } = this.$socket.webSocketType
        switch (message.type) {
          case SingleFab:
            if (this.user.uid == message.to) {
              this.updateAllUnread({ type: 'add', data: message.data })
              console.log('消息通知+1')
            }
            break
          case SingleCom:
            if (this.user.uid == message.to) {
              this.updateAllUnread({ type: 'add', data: message.data })
              console.log('消息通知+1')
            }
            break
        }
      } catch (error) {

      }
    },

    // 显示返回顶部按钮
    winScroll () {
      this.clientHeight = Math.floor(scroll.getClientHeight()) // 获取当前可视范围的高度
      this.scrollTop = Math.floor(scroll.getScrollTop()) // 获取当前滚动条的位置
      if (this.scrollTop > this.clientHeight) {
        this.showTop = true
      } else {
        this.showTop = false
      }
    },
    // 返回顶部
    backTop () {
      console.log(111)
      const timer = setInterval(() => {
        const ispeed = Math.floor(-this.scrollTop / 5)
        console.log(ispeed)
        // 设置返回顶部
        if (document.documentElement && document.documentElement.scrollTop) {
          document.documentElement.scrollTop = ispeed + this.scrollTop
        } else if (document.body) {
          document.body.scrollTop = ispeed + this.scrollTop
        }

        // 到底顶部，清除定时器
        if (this.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 30)
    },
    // 确认退出登录
    change () {
      // 清空历史纪律
      if (this.considerData.type === 'delhistory') {
        http.delhistory(this.considerData.uid).then(res => {
          console.log(res.data)
          if (+res.data.ok === 1) {
            const state = this.delVideoHistory
            this.delVideo(!state)
          }
        })
      } else if (this.considerData.type === 'removeUser') {
        // 重置登录的用户信息
        this.UserData({
          isUser: false,
          uid: '0',
          username: '',
          avatar: '',
          lable: ''
        })
        // 清空token
        localStorage.removeItem('token')

        this.$router.push({ path: '/' })
        this.$router.go(0)
        // 取消关注
      } else if (this.considerData.type === 'removeFollowOne') {
        http.userdelfollow(this.considerData.uid, this.considerData.nid).then(res => {
          if (res.data.ok === 0) {
          // 失败
          // this.tipsMethod(res.data.message)
          } else if (res.data.ok === 1) {
            const state = this.followOneState
            this.checkFollowOne(!state)
          // 成功
          // this.tipsMethod(res.data.message)
          // 删除对应的用户
            // this.followList.splice(this.cruntIndex, 1)
          }
        })
      } else if (this.considerData.type === 'delartcle') {
        // 删除成功，数组内的对应项
        http.delarticle(this.considerData.cid).then((res) => {
        // 删除成功
          if (res.data.ok === 1) {
          // this.$refs.waves.tipsMethod()
            console.log('删除文章成功')
            const state = this.delArtcleState
            // 更改状态，触发方法
            this.checkDelArtcle(!state)
            // this.articleList.splice(this.delIndex, 1)
          } else if (res.data.ok === 0) {
          // this.$refs.waves.tipsMethod()

            console.log('删除失败')
          }
        })
      } else if (this.considerData.type === 'removeFans') {
        // 移除粉丝
        console.log(this.user.uid, this.considerData.nid)
        http.userdelfollow(this.considerData.nid, this.user.uid).then(res => {
          if (res.data.ok === 0) {
          // 失败
            console.log('移除粉丝失败')
            // this.tipsMethod(res.data.message)
          } else if (res.data.ok === 1) {
          // 成功
            console.log('移除粉丝成功')
            const state = this.removeFansState
            this.removeFansTwo(!state)
            // this.tipsMethod(res.data.message)
            // this.fansList.splice(this.cruntIndex, 1)
          }
        })
        // 取消关注
      } else if (this.considerData.type === 'removeFollowTwo') {
        console.log(this.user.uid, this.considerData.nid)
        http.userdelfollow(this.user.uid, this.considerData.nid).then(res => {
          console.log(res.data)
          if (res.data.ok === 0) {
          // 失败
            console.log('取消关注失败')
            // this.tipsMethod(res.data.message)
          } else if (res.data.ok === 1) {
          // 成功
            console.log('取消关注成功')
            // this.tipsMethod(res.data.message)
          }
        })
      }
    }

  }
}
</script>
<style lang="scss" >
// 引入基础配置
@use "@/styles/init" as h;

  body,html{
    background: #f5f5f5 ;

  }

  *{
    margin: 0;
    padding: 0;
  }
  body{
    font-size: 16px;
  }
  .box{
    position: relative;
    width: 100%;
    height: 100%;

  }

  //loading加载的样式
  .el-loading-spinner .path {
  -webkit-animation: loading-dash 1.5s ease-in-out infinite;
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 36, 60;
  stroke-dashoffset: 0;
  stroke-width: 2;
  /* stroke: var(--el-color-primary); */
  stroke-linecap: round;
  stroke: #000!important;
}

.el-loading-spinner .el-loading-text {
  /* color: var(--el-color-primary); */
  color: #f60 !important;
  margin: 3px 0;
  font-size: 14px;
}

</style>
<style lang="scss">

</style>
